<div class="row">
  <div class="col-md-12">
    <div class="panel panel-success">
      <div class="panel-body">
        <div ng-if="trails.length == 0" class="alert alert-info" role="alert"> You currently do not have any
          trails associated with your account. Click <strong>New Trail</strong> to add one.
        </div>
        <table ng-if="trails.length > 0" class="table table-striped">
          <thead>
            <tr>
              <th>Title</th>
              <th>Description</th>
              <th>Modified</th>
              <th>Created</th>
              <th>Operations</th>
            </tr>
          </thead>
          <tbody>
            <tr data-ng-repeat="trail in trails" ng-class="getStatus(trail)">
              <td><a ui-sref="trail.view({trailId: trail._id})">{{ trail.data.title }}</a></td>
              <td>{{ trail.data.description }}</td>
              <td>{{ trail.modified | amDateFormat:'MMMM Do YYYY, h:mm:ss a' }}</td>
              <td>{{ trail.created | amDateFormat:'MMMM Do YYYY, h:mm:ss a' }}</td>
              <td>
                <div class="button-group" style="display:flex;">
                  <a ui-sref="trail.view({trailId: trail._id})" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-eye-open"></span></a>&nbsp;
                  <a ui-sref="trail.edit({trailId: trail._id})" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-edit"></span></a>&nbsp;
                  <a ui-sref="trail.delete({trailId: trail._id})" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove-circle"></span></a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <bgf-pagination collection="trails" url="trailsUrl" per-page="5" template-url="./views/pager.html"></bgf-pagination>
      </div>
      <div class="panel-footer"><a ui-sref="trailCreate()" class="btn btn-primary">
        <i class="glyphicon glyphicon-plus"></i> New Trail</a>
      </div>
    </div>
  </div>
</div>
